<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>markdown文档转公众号 | 在线排版工具</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>MarkDown文档转公众号排版工具</h1>
            <p class="subtitle">快速将文档转换为美观的公众号文章</p>
        </header>

        <div class="main-content">
            <div class="editor-section">
                <div class="section-header">
                    <h2>📝 编辑区</h2>
                    <div class="toolbar">
                        <button id="clearBtn" class="btn btn-secondary">清空</button>
                        <button id="pasteBtn" class="btn btn-primary">粘贴markdown内容</button>
                    </div>
                </div>
                <textarea id="editor" placeholder="请粘贴文档内容到这里...\n\n支持的格式：\n- 标题（# ## ###）\n- 粗体（**文本**）\n- 斜体（*文本*）\n- 代码（`代码`）\n- 列表（- 项目）\n- 引用（> 引用内容）\n- 表格\n- 代码块"></textarea>
            </div>

            <div class="preview-section">
                <div class="section-header">
                    <h2>👀 预览区</h2>
                    <div class="toolbar">
                        <div class="theme-selector">
                            <label>主题：</label>
                            <select id="themeSelect">
                                <option value="default">☀️ 默认主题</option>
                                <option value="warm">💧 暖色主题</option>
                                <option value="minimal">🪶 极简主题</option>
                                <option value="elegant">🌸 优雅粉色</option>
                                <option value="ocean">🌊 海洋蓝调</option>
                                <option value="forest">🌿 森林绿意</option>
                                <option value="sunset">🌅 夕阳橙红</option>
                                <option value="lavender">💜 薰衣草紫</option>
                                <option value="cherry">🌺 樱花粉嫩</option>
                                <option value="mint">🍃 薄荷清新</option>
                            </select>
                        </div>
                        <div class="preview-mode">
                            <button id="mobilePreview" class="btn btn-sm ">📱 手机预览</button>
                            <button id="desktopPreview" class="btn btn-sm active">💻 电脑预览</button>
                            <button id="copyBtn" class="btn btn-success">📋 复制富文本</button>
                        </div>
                     
                    </div>
                </div>
                <div id="preview" class="preview-content desktop-preview"></div>
            </div>
        </div>

        <div class="features">
            <h2>🌈 核心功能</h2>
            <div class="feature-grid">
                <div class="feature-card">
                    <h3>⚡ 一键转换</h3>
                    <p>从MarkDown文档直接复制，自动转换为 Markdown</p>
                </div>
                <div class="feature-card">
                    <h3>👁️ 实时预览</h3>
                    <p>支持手机和电脑两种预览模式</p>
                </div>
                <div class="feature-card">
                    <h3>🎨 多种主题</h3>
                    <p>提供10种精美主题，包括优雅粉色、海洋蓝调、森林绿意等唯美风格</p>
                </div>
                <div class="feature-card">
                    <h3>📝 完整样式</h3>
                    <p>支持图片、表格、代码等富文本格式</p>
                </div>
            </div>
        </div>

        <div class="usage-guide">
            <h2>📖 使用方法</h2>
            <ol>
                <li>打开文档，复制需要转换的内容</li>
                <li>粘贴到左侧编辑区</li>
                <li>右侧实时预览效果</li>
                <li>选择合适的主题</li>
                <li>点击复制按钮，粘贴到公众号</li>
            </ol>
        </div>
    </div>

    <footer class="footer">
        <p>© 2024 markdown文档转公众号工具 | 让公众号排版更简单</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>